<template>
  <div class="Processed">
    <div class="title">事件统计</div>
    <el-card class="box-card">
      年份：
      <el-select v-model="query.year" placeholder="请选择" size="small">
        <el-option
          v-for="item in yearList"
          :key="item"
          :label="item"
          :value="item"
        >
        </el-option>
      </el-select>
      <el-button size="small" @click="getTable" style="margin-left: 5px"
        >搜索</el-button
      >
      <el-button size="small" @click="upLoadTable">导出</el-button>
    </el-card>
    <el-row>
      <el-col :span="23">
        <el-table
          :data="tableData.table1"
          style="width: 100%; margin: 10px"
          height="300"
          :header-cell-style="{
            background: 'rgb(246,250,253)',
            color: '#000000',
          }"
          border
        >
          <el-table-column prop="type" label="类型" />
          <el-table-column prop="month1" label="1月" />
          <el-table-column prop="month2" label="2月" />
          <el-table-column prop="month3" label="3月" />
          <el-table-column prop="month4" label="4月" />
          <el-table-column prop="month5" label="5月" />
          <el-table-column prop="month6" label="6月" />
          <el-table-column prop="month7" label="7月" />
          <el-table-column prop="month8" label="8月" />
          <el-table-column prop="month9" label="9月" />
          <el-table-column prop="month10" label="10月" />
          <el-table-column prop="month11" label="11月" />
          <el-table-column prop="month12" label="12月" />
          <el-table-column prop="count" label="合计" />
        </el-table>
        <el-table
          :data="tableData.table2"
          style="width: 100%; margin: 10px"
          height="300"
          :header-cell-style="{
            background: 'rgb(246,250,253)',
            color: '#000000',
          }"
          border
        >
          <el-table-column prop="type" label="医疗质里指标" />
          <el-table-column prop="month1" label="1月" />
          <el-table-column prop="month2" label="2月" />
          <el-table-column prop="month3" label="3月" />
          <el-table-column prop="month4" label="4月" />
          <el-table-column prop="month5" label="5月" />
          <el-table-column prop="month6" label="6月" />
          <el-table-column prop="month7" label="7月" />
          <el-table-column prop="month8" label="8月" />
          <el-table-column prop="month9" label="9月" />
          <el-table-column prop="month10" label="10月" />
          <el-table-column prop="month11" label="11月" />
          <el-table-column prop="month12" label="12月" />
          <el-table-column prop="count" label="合计" />
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: "",
      tableData: [],
      科室: [],
      事件等级: [],
      query: {
        year: "",
        month: "",
      },
      total: 0,
      事件状态: [],
      nowOrd: baseUrl.ord,
      yearList: [],
    };
  },
  mounted() {
    this.getYearList();
    // this.getTable();
  },
  methods: {
    getYearList() {
      // 获取当前年份
      var currentYear = new Date().getFullYear();
      // 创建一个数组来存储近10年的年份
      var pastTenYears = [];
      // 循环获取近10年的年份
      for (let i = 0; i < 10; i++) {
        var year = currentYear - i;
        pastTenYears.push(year);
      }
      this.yearList = pastTenYears;
    },
    getTable() {
      if (this.query.year == "") {
        this.$notify.error({
          title: "提示",
          message: "请完整选择查询条件！",
        });
        return;
      }
      var body = this.query;
      this.$get("/Aers/Statistics/GetStatistic?year=" + body.year).then(
        (res) => {
          this.tableData = res.data;
        }
      );
    },
    upLoadTable() {
      var body = this.query;
      this.$get("/Aers/Statistics/ExportStatistic?year=" + body.year).then(
        (res) => {
          window.open(baseUrl.baseIP + res.data.urlPath);
        }
      );
    },
  },
};
</script>
<style scoped>
body {
  background-color: #f8f9fa;
}
.box-card {
  margin: 5px;
}
.el-card /deep/ .el-card__header {
  padding: 10px 20px;
  background-color: #e2e2e2;
}
.top-ipt {
  margin-left: 5px;
}
.title {
  background-color: rgb(233, 242, 255);
  line-height: 45px;
  font-size: 18px;
  font-weight: 700;
  padding: 0 10px;
}
</style>